<template>
    <section>
        <el-card>
            <el-table
                    :data="k8sPersistentVolume"
                    stripe
                    style="width: 100%"
                    :row-style="rowStyle"
            >
                <el-table-column
                        prop="name"
                        label="名称"
                        width="180">
                    <template slot-scope="scope">
                        <el-link :href="'#/kubernetes/persistentvolume/' + scope.row.name "  type="primary" :underline="false" icon="el-icon-s-promotion">{{scope.row.name}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="labels"
                        label="标签"

                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.labels !== undefined">
                            <div v-for="(v,k) in scope.row.labels">
                             <el-tag  type="info" size="mini">{{k}}: {{v}}</el-tag>
                            </div>
                        </div>
                        <div v-else>--</div>
                    </template>


                </el-table-column>
                <el-table-column
                        prop="capacity.storage"
                        label="总量"
                        width="180">
                </el-table-column>
                <el-table-column

                        label="访问模式">
                    <template slot-scope="scope">
                        <div v-for="mode in scope.row.accessmodes">
                            <el-tag  type="info" size="mini">{{mode}}</el-tag>
                        </div>
                    </template>

                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="claim"
                        label="索取"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="reason"
                        label="原因"
                        width="180">
                    <template slot-scope="scope">

                        <div v-if="scope.row.reason !== ''">{{scope.row.reason}}</div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="createdate"
                        label="创建时间">
                </el-table-column>
            </el-table>
        </el-card>
    </section>
</template>

<script>
    import { k8sPersistentVolumeData } from '../../api/api'
    export default {
        data() {
            return {
                k8sPersistentVolume: [],
            }
        },
        methods: {
            rowStyle({ row, rowIndex}){
                return "height:50px;"
            },
            getK8sPersistentVolumeData(){
                let self = this
                k8sPersistentVolumeData().then((res) => {
                    console.log(res)
                    self.k8sPersistentVolume = res.persistentVolume

                })

            },
        },
        mounted: function () {
            console.log("debug ehrer")
            this.getK8sPersistentVolumeData()

        }
    }
</script>